<template>
  <div
    class="bodyer"
    style="background-color: rgb(247, 247, 247); height: 890px"
  >
    <div style="height: 400px">
      <h1 style="padding: 20px 20px">数据总览</h1>
      <div class="bodyer_left" style="float: left">
        <div style="width: 560px; height: 70px; padding: 30px 20px">
          <img
            :src="imgs.img1"
            alt=""
            style="width: 100px; height: 100px; float: left"
          />
          <ul style="float: left" class="border_ul">
            <li>当前通话总并发数&emsp;&emsp;&emsp;&emsp;0</li>
            <li>今日最高通话并发数&emsp;&emsp;&emsp;1</li>
            <li>历史最高通话并发数&emsp;&emsp;&nbsp;1291</li>
          </ul>
        </div>
        <div>
          <ul class="second">
            <li>docker1<span>0</span></li>
            <li>develop <span>0</span></li>
            <li>sdet0320 <span>0</span></li>
            <li>0418 <span>0</span></li>
            <li>shengy618 <span>0</span></li>
          </ul>
        </div>
      </div>
      <div class="bodyer_left" style="float: left">
        <div style="width: 560px; height: 70px; padding: 30px 20px">
          <img
            :src="imgs.img2"
            alt=""
            style="width: 100px; height: 100px; float: left"
          />
          <ul style="float: left" class="border_ul">
            <li>当前线路总并开发数&emsp;&emsp;&emsp;3(电路2网络1)</li>
            <li>今日最高线路并发数&emsp;&emsp;&emsp;8(电路6网络2)</li>
            <li>历史最高线路并发数&emsp;&emsp;&nbsp;2151(电路72网络2079)</li>
          </ul>
        </div>
        <div>
          <ul class="second">
            <li>docker1<span>0</span></li>
            <li>develop <span>0</span></li>
            <li>sdet0320 <span>0</span></li>
            <li>0418 <span>0</span></li>
            <li>shengy618 <span>0</span></li>
          </ul>
        </div>
      </div>
    </div>
    <div style="height: 500px">
      <h1>&nbsp;&nbsp;&nbsp;<b>并发趋势图</b></h1>
      <div>
        <div style="height: 400px; width: 500px; background-color: aqua">
          <dv-active-ring-chart
            :config="config"
            style="width: 300px; height: 300px"
          />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
// 图片
import img1 from "@/assets/微信图片_20250701151329.png";
import img2 from "@/assets/微信图片_20250701151335.png";

export default {
  data() {
    return {
      config: {
        name: "周口",
        value: 55,
        percent: 30, // 必须！环形图占比（0-100）
        width: 300, // 图表宽度（可选，也可通过 style 控制）
        height: 300, // 图表高度（可选）
        ringWidth: 30, // 环形宽度
        bgColor: "#e5e9f2", // 背景环颜色
        fillColor: "#409eff", // 填充环颜色
        textColor: "#333", // 中心文字颜色
        fontSize: 24, // 中心文字大小
        fontStyle: "微软雅黑", // 中心文字字体
      },
      imgs: {
        img1: img1,
        img2: img2,
      },
    };
  },
};
</script>
<style>
* {
  padding: 0px;
  margin: 0px;
}
li {
  list-style: none;
}
.border_ul {
  /* 重置默认样式，确保一致 */
  margin: 0 10px;
  padding: 0;
  /* 文字相关（根据目标页面调试） */
  font-size: 14px; /* 假设目标是14px */
  color: #333; /* 假设目标是深灰色 */
  line-height: 1.6; /* 行高更舒适 */
}
.border_ul li {
  list-style: none;
  padding: 5px 0px;
  /* 补充：让文字左对齐，且间距统一 */
  text-indent: 0;
  margin: 0;
}
.bodyer_left {
  background-color: rgb(255, 255, 255);
  margin: 0px 20px;
  width: 600px;
}
.second {
  border-top: 1px solid darkgray;
  height: 120px;
  margin: 20px 0px 0px 0px;
  background-color: rgb(250, 250, 250);
}
.second li {
  display: flex;
  font-size: 12px;
  color: darkgray;
  padding: 5px 20px 0px 20px;
  justify-content: space-between;
}
</style>